<template>
  <div class="menu-wrapper">
    <!-- <div >
      首页
    </div> --> 
     <!-- <el-menu-item 
      :class="{'is-active':vaildAvtive('index')}"
      
      @click="opened('index')" style="background-color:transparent;height: 80px;line-height:80px;padding-left:20px;border-radius: 0px 80px 0px 0px;">
        <i class="el-icon-house"/>
        <span slot="title">首页</span>
        style="background-color:transparent;height: 80px;line-height:80px;padding-left:20px;border-radius: 0px 80px 0px 0px;"
      </el-menu-item> -->
    <template v-for="item in menu" >
  
      <el-menu-item
        v-if="validatenull(item[childrenKey]) && vaildRoles(item)&&item[statusKey]=='0'"
        :index="item[pathKey]"
        :key="item[labelKey]"
        :class="{'is-active':vaildAvtive(item)}"
        @click="open(item)">
        <i :class="item[iconKey]"/>
        <span
          slot="title"
          :alt="item[pathKey]">{{ item[labelKey] }}</span>
      </el-menu-item>
      <el-submenu
        v-else-if="!validatenull(item[childrenKey])&&vaildRoles(item)&&item[statusKey]=='0'"
        :index="item[pathKey]"
        :key="item[labelKey]">
        <template slot="title">
          <i :class="item[iconKey]"/>
          <span
            slot="title"
            :class="{'el-menu--display':collapse && first}">{{ item[labelKey] }}</span>
        </template>
        <template v-for="(child,cindex) in item[childrenKey]">
          <el-menu-item
            v-if="validatenull(child[childrenKey])&&child[statusKey]=='0'"
             :index="child[pathKey]"
            :class="{'is-active':vaildAvtive(child)}"
            :key="child[labelKey]"
            @click="open(child)">
            <i :class="child[iconKey]"/>
            <span slot="title">{{ child[labelKey] }}</span>
          </el-menu-item>
          <sidebar-item
            v-else
            :menu="[child]"
            :key="cindex"
            :props="props"
            :screen="screen"
            :collapse="collapse"/>
        </template>
      </el-submenu>
     
    </template>
     </div> 
  
</template>
<script>
import { mapGetters } from 'vuex'
import { validatenull } from '@/util/validate'
import config from './config.js'
export default {
  name: 'SidebarItem',
  props: {
    menu: {
      type: Array
    },
    screen: {
      type: Number
    },
    first: {
      type: Boolean,
      default: false
    },
    props: {
      type: Object,
      default: () => {
        return {}
      }
    },
    collapse: {
      type: Boolean
    }
  },
  data() {
    return {
      config: config,
     
    }
  },
  created() {},
  mounted() {},
  computed: {
    ...mapGetters(['roles','tagList']),
    labelKey() {
      return this.props.label || this.config.propsDefault.label
    },
    pathKey() {
      return this.props.path || this.config.propsDefault.path
    },
    iconKey() {
      return this.props.icon || this.config.propsDefault.icon
    },
    childrenKey() {
      return this.props.children || this.config.propsDefault.children
    },
    nowTagValue() {
      return this.$router.$avueRouter.getValue(this.$route)
    },
    statusKey(){
      return this.props.status || this.config.propsDefault.status
    }
  },
  methods: {
    vaildAvtive(item) {
     
      // if(item!='index'){
         const groupFlag = (item['group'] || []).some(ele =>{
  this.$route.path.includes(ele)
       
         }
      
      )
      return this.nowTagValue === item[this.pathKey] || groupFlag
      // }else if(item=='index'){
      //   return this.nowTagValue==='/wel/index'
      // }
     
    },
    vaildRoles(item) {
      item.meta = item.meta || {}
      return item.meta.roles ? item.meta.roles.includes(this.roles) : true
    },
    validatenull(val) {
      return validatenull(val)
    },
    // opened(){
    
    //   this.$router.push({
    //     path: this.$router.$avueRouter.getPath({
    //       name:  "首页",
    //       src: "/wel/index"
    //     }),
        
    //   }).catch(() => {})
    // },
    open(item) {
     
      if (this.screen <= 1) this.$store.commit('SET_COLLAPSE')
      this.$router.$avueRouter.group = item.group
      this.$router.push({
        path: this.$router.$avueRouter.getPath({
          name: item[this.labelKey],
          src: item[this.pathKey]
        }),
        query: item.query
      }).catch(() => {})
    }
  }
}
</script>
<style >

.overflowStyle::-webkit-scrollbar-track-piece {
        background-color: transparent;
    }
   
    .overflowStyle::-webkit-scrollbar {
        width: 2px;
        height: 7px;
        background-color: transparent;
    }
     .overflowStyle::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: hsla(220, 4%, 58%, .3);
    }
   /* .overflowStyle > li:nth-child(1){

height: 80px;
line-height:80px;
padding-left:20px;
border-radius: 0px 80px 0px 0px;
z-index: 10001;
position: fixed;
background-color: white !important;
opacity: 1 !important;
    }
    .overflowStyle > li:nth-child(2){
margin-top: 80px;

    } */

</style>

